<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章发布</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary-color: #4a6cf7;
            --primary-dark: #3a5ce5;
            --text-color: #333;
            --bg-color: #f5f7fa;
            --card-bg: #fff;
            --border-color: #e1e5eb;
            --error-color: #e74c3c;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .logo i {
            font-size: 28px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .editor-container {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 25px;
        }
        
        @media (max-width: 992px) {
            .editor-container {
                grid-template-columns: 1fr;
            }
        }
        
        .editor-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        .card-title {
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            color: var(--primary-color);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 15px;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 15px;
            background-color: var(--card-bg);
            color: var(--text-color);
            transition: all 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            padding: 12px;
            background-color: #f8f9fa;
            border: 1px solid var(--border-color);
            border-radius: 8px 8px 0 0;
        }
        
        .toolbar-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .toolbar-btn:hover {
            background-color: #f0f2f5;
        }
        
        .toolbar-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .editor-content {
            min-height: 300px;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 8px 8px;
            background-color: white;
        }
        
        .editor-content:focus {
            outline: none;
        }
        
        .tag-input-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            min-height: 50px;
            align-items: center;
        }
        
        .tag {
            display: flex;
            align-items: center;
            gap: 5px;
            background-color: #eef2ff;
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .tag-remove {
            cursor: pointer;
            font-size: 12px;
        }
        
        .tag-input {
            border: none;
            outline: none;
            flex-grow: 1;
            min-width: 100px;
            padding: 5px;
        }
        
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checkbox-item input {
            width: 18px;
            height: 18px;
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-secondary {
            background-color: #f0f2f5;
            color: var(--text-color);
        }
        
        .btn-secondary:hover {
            background-color: #e4e6e9;
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #e67e22;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            margin-top: 20px;
        }
        
        .status-draft {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-published {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .sidebar-section {
            margin-bottom: 25px;
        }
        
        .sidebar-section-title {
            font-size: 16px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .thumbnail-preview {
            width: 100%;
            height: 180px;
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #6c757d;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 15px;
        }
        
        .thumbnail-preview:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .thumbnail-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            border-radius: 6px;
            display: none;
        }
        
        .char-count {
            text-align: right;
            font-size: 14px;
            color: #6c757d;
            margin-top: 5px;
        }
        
        .word-count-warning {
            color: var(--warning-color);
        }
        
        .word-count-error {
            color: var(--error-color);
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 8px;
            color: white;
            box-shadow: var(--shadow);
            transform: translateX(150%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification-success {
            background-color: var(--success-color);
        }
        
        .notification-error {
            background-color: var(--error-color);
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            color: #6c757d;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-pen-fancy"></i>
                <span>创作中心</span>
            </div>
            <div class="user-info">
                <div class="user-avatar">xxx</div>
                <span>大白菜</span>
            </div>
        </header>
        
        <div class="editor-container">
            <main>
                <div class="editor-card">
                    <h2 class="card-title"><i class="fas fa-edit"></i> 编辑文章</h2>
                    
                    <div class="form-group">
                        <label for="article-title">文章标题</label>
                        <input type="text" id="article-title" class="form-control" placeholder="请输入文章标题">
                        <div class="char-count">
                            <span id="title-count">0</span>/60
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="article-summary">文章摘要</label>
                        <textarea id="article-summary" class="form-control" placeholder="请输入文章摘要（可选）"></textarea>
                        <div class="char-count">
                            <span id="summary-count">0</span>/200
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>文章内容</label>
                        <div class="editor-toolbar">
                            <button class="toolbar-btn" data-command="bold" title="加粗"><i class="fas fa-bold"></i></button>
                            <button class="toolbar-btn" data-command="italic" title="斜体"><i class="fas fa-italic"></i></button>
                            <button class="toolbar-btn" data-command="underline" title="下划线"><i class="fas fa-underline"></i></button>
                            <div class="toolbar-separator"></div>
                            <button class="toolbar-btn" data-command="insertUnorderedList" title="无序列表"><i class="fas fa-list-ul"></i></button>
                            <button class="toolbar-btn" data-command="insertOrderedList" title="有序列表"><i class="fas fa-list-ol"></i></button>
                            <div class="toolbar-separator"></div>
                            <button class="toolbar-btn" data-command="createLink" title="插入链接"><i class="fas fa-link"></i></button>
                            <button class="toolbar-btn" data-command="insertImage" title="插入图片"><i class="fas fa-image"></i></button>
                            <div class="toolbar-separator"></div>
                            <button class="toolbar-btn" data-command="formatBlock" data-value="h2" title="标题"><i class="fas fa-heading"></i></button>
                            <button class="toolbar-btn" data-command="formatBlock" data-value="blockquote" title="引用"><i class="fas fa-quote-right"></i></button>
                        </div>
                        <div id="editor-content" class="editor-content" contenteditable="true">
                            <p>开始撰写您的文章内容...</p>
                        </div>
                        <div class="char-count">
                            <span id="content-count">0</span> 字
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-primary" id="publish-btn">
                            <i class="fas fa-paper-plane"></i> 发布文章
                        </button>
                        <button class="btn btn-secondary" id="save-draft-btn">
                            <i class="fas fa-save"></i> 保存草稿
                        </button>
                        <button class="btn btn-secondary" id="preview-btn">
                            <i class="fas fa-eye"></i> 预览
                        </button>
                    </div>
                    
                    <div class="status-indicator status-draft">
                        <i class="fas fa-file-alt"></i>
                        <span>当前状态：草稿</span>
                    </div>
                </div>
            </main>
            
            <aside>
                <div class="editor-card">
                    <h3 class="card-title"><i class="fas fa-cog"></i> 发布设置</h3>
                    
                    <div class="sidebar-section">
                        <h4 class="sidebar-section-title">文章分类</h4>
                        <select class="form-control" id="article-category">
                            <option value="">选择分类</option>
                            <option value="technology">技术</option>
                            <option value="design">设计</option>
                            <option value="business">商业</option>
                            <option value="lifestyle">生活方式</option>
                            <option value="education">教育</option>
                        </select>
                    </div>
                    
                    <div class="sidebar-section">
                        <h4 class="sidebar-section-title">文章标签</h4>
                        <div class="tag-input-container" id="tag-container">
                            <input type="text" class="tag-input" id="tag-input" placeholder="输入标签后按回车">
                        </div>
                    </div>
                    
                    <div class="sidebar-section">
                        <h4 class="sidebar-section-title">封面图片</h4>
                        <div class="thumbnail-preview" id="thumbnail-preview">
                            <i class="fas fa-cloud-upload-alt fa-2x"></i>
                            <span>点击上传封面图片</span>
                            <img id="thumbnail-image" src="" alt="封面预览">
                        </div>
                        <input type="file" id="thumbnail-upload" accept="image/*" style="display: none;">
                    </div>
                    
                    <div class="sidebar-section">
                        <h4 class="sidebar-section-title">发布选项</h4>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="allow-comments" checked>
                                <label for="allow-comments">允许评论</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="featured-post">
                                <label for="featured-post">设为推荐文章</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="schedule-publish">
                                <label for="schedule-publish">定时发布</label>
                            </div>
                        </div>
                        
                        <div id="schedule-date-container" style="display: none; margin-top: 15px;">
                            <input type="datetime-local" class="form-control" id="schedule-date">
                        </div>
                    </div>
                </div>
            </aside>
        </div>
        
        <footer>
            <p>© 2025 7777博客平台 · 让创作更简单</p>
        </footer>
    </div>
    
    <div class="notification" id="notification">
        <span id="notification-text">操作成功！</span>
    </div>

    <script>
        // DOM元素
        const titleInput = document.getElementById('article-title');
        const summaryInput = document.getElementById('article-summary');
        const editorContent = document.getElementById('editor-content');
        const publishBtn = document.getElementById('publish-btn');
        const saveDraftBtn = document.getElementById('save-draft-btn');
        const previewBtn = document.getElementById('preview-btn');
        const tagInput = document.getElementById('tag-input');
        const tagContainer = document.getElementById('tag-container');
        const thumbnailPreview = document.getElementById('thumbnail-preview');
        const thumbnailUpload = document.getElementById('thumbnail-upload');
        const thumbnailImage = document.getElementById('thumbnail-image');
        const scheduleCheckbox = document.getElementById('schedule-publish');
        const scheduleDateContainer = document.getElementById('schedule-date-container');
        const notification = document.getElementById('notification');
        const notificationText = document.getElementById('notification-text');
        
        // 字符计数
        const titleCount = document.getElementById('title-count');
        const summaryCount = document.getElementById('summary-count');
        const contentCount = document.getElementById('content-count');
        
        // 标签数组
        let tags = [];
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 字符计数更新
            titleInput.addEventListener('input', updateTitleCount);
            summaryInput.addEventListener('input', updateSummaryCount);
            editorContent.addEventListener('input', updateContentCount);
            
            // 标签输入
            tagInput.addEventListener('keydown', handleTagInput);
            
            // 封面图片上传
            thumbnailPreview.addEventListener('click', () => thumbnailUpload.click());
            thumbnailUpload.addEventListener('change', handleThumbnailUpload);
            
            // 定时发布
            scheduleCheckbox.addEventListener('change', function() {
                scheduleDateContainer.style.display = this.checked ? 'block' : 'none';
            });
            
            // 工具栏按钮
            document.querySelectorAll('.toolbar-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const command = this.dataset.command;
                    const value = this.dataset.value;
                    
                    if (command === 'createLink') {
                        const url = prompt('请输入链接地址:');
                        if (url) document.execCommand(command, false, url);
                    } else if (command === 'insertImage') {
                        const url = prompt('请输入图片地址:');
                        if (url) document.execCommand(command, false, url);
                    } else {
                        document.execCommand(command, false, value);
                    }
                    
                    // 更新编辑器焦点
                    editorContent.focus();
                });
            });
            
            // 按钮事件
            publishBtn.addEventListener('click', publishArticle);
            saveDraftBtn.addEventListener('click', saveDraft);
            previewBtn.addEventListener('click', previewArticle);
            
            // 初始计数
            updateTitleCount();
            updateSummaryCount();
            updateContentCount();
        });
        
        // 更新标题字符计数
        function updateTitleCount() {
            const count = titleInput.value.length;
            titleCount.textContent = count;
            
            if (count > 50) {
                titleCount.classList.add('word-count-warning');
            } else {
                titleCount.classList.remove('word-count-warning');
            }
        }
        
        // 更新摘要字符计数
        function updateSummaryCount() {
            const count = summaryInput.value.length;
            summaryCount.textContent = count;
            
            if (count > 180) {
                summaryCount.classList.add('word-count-warning');
            } else {
                summaryCount.classList.remove('word-count-warning');
            }
        }
        
        // 更新内容字符计数
        function updateContentCount() {
            const text = editorContent.innerText || '';
            const count = text.length;
            contentCount.textContent = count;
            
            if (count < 300) {
                contentCount.classList.add('word-count-warning');
            } else {
                contentCount.classList.remove('word-count-warning');
            }
        }
        
        // 处理标签输入
        function handleTagInput(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const tag = tagInput.value.trim();
                
                if (tag && !tags.includes(tag)) {
                    tags.push(tag);
                    renderTags();
                    tagInput.value = '';
                }
            }
        }
        
        // 渲染标签
        function renderTags() {
            // 清除现有标签（除了输入框）
            const existingTags = tagContainer.querySelectorAll('.tag');
            existingTags.forEach(tag => tag.remove());
            
            // 添加新标签
            tags.forEach(tag => {
                const tagElement = document.createElement('div');
                tagElement.className = 'tag';
                tagElement.innerHTML = `
                    ${tag}
                    <span class="tag-remove" data-tag="${tag}">×</span>
                `;
                tagContainer.insertBefore(tagElement, tagInput);
            });
            
            // 添加删除事件
            document.querySelectorAll('.tag-remove').forEach(button => {
                button.addEventListener('click', function() {
                    const tagToRemove = this.dataset.tag;
                    tags = tags.filter(tag => tag !== tagToRemove);
                    renderTags();
                });
            });
        }
        
        // 处理封面图片上传
        function handleThumbnailUpload(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                
                reader.onload = function(event) {
                    thumbnailImage.src = event.target.result;
                    thumbnailImage.style.display = 'block';
                    thumbnailPreview.querySelector('i').style.display = 'none';
                    thumbnailPreview.querySelector('span').style.display = 'none';
                };
                
                reader.readAsDataURL(file);
            }
        }
        
        // 发布文章
        function publishArticle() {
            if (!validateForm()) return;
            
            // 模拟发布过程
            showNotification('文章发布成功！', 'success');
            
            // 在实际应用中，这里会发送数据到服务器
            console.log('发布文章:', {
                title: titleInput.value,
                summary: summaryInput.value,
                content: editorContent.innerHTML,
                category: document.getElementById('article-category').value,
                tags: tags,
                allowComments: document.getElementById('allow-comments').checked,
                featured: document.getElementById('featured-post').checked,
                scheduled: scheduleCheckbox.checked,
                scheduleDate: document.getElementById('schedule-date').value
            });
        }
        
        // 保存草稿
        function saveDraft() {
            // 模拟保存过程
            showNotification('草稿保存成功！', 'success');
            
            // 在实际应用中，这里会发送数据到服务器
            console.log('保存草稿:', {
                title: titleInput.value,
                summary: summaryInput.value,
                content: editorContent.innerHTML,
                category: document.getElementById('article-category').value,
                tags: tags
            });
        }
        
        // 预览文章
        function previewArticle() {
            if (!validateForm(true)) return;
            
            // 在实际应用中，这里会打开预览窗口
            alert('预览功能将在新窗口中打开');
            console.log('预览文章:', {
                title: titleInput.value,
                summary: summaryInput.value,
                content: editorContent.innerHTML,
                category: document.getElementById('article-category').value,
                tags: tags
            });
        }
        
        // 表单验证
        function validateForm(isPreview = false) {
            if (!titleInput.value.trim()) {
                showNotification('请输入文章标题', 'error');
                titleInput.focus();
                return false;
            }
            
            if (titleInput.value.length > 60) {
                showNotification('文章标题不能超过60个字符', 'error');
                titleInput.focus();
                return false;
            }
            
            if (summaryInput.value.length > 200) {
                showNotification('文章摘要不能超过200个字符', 'error');
                summaryInput.focus();
                return false;
            }
            
            const contentText = editorContent.innerText || '';
            if (contentText.length < 50 && !isPreview) {
                showNotification('文章内容至少需要50个字符', 'error');
                editorContent.focus();
                return false;
            }
            
            if (!document.getElementById('article-category').value) {
                showNotification('请选择文章分类', 'error');
                return false;
            }
            
            return true;
        }
        
        // 显示通知
        function showNotification(message, type) {
            notificationText.textContent = message;
            notification.className = 'notification';
            notification.classList.add(`notification-${type}`, 'show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html>